:root{
    --gray-1: #FFFFFF;
    --gray-2: #F2F2F2;
    --gray-3: #FAFAFA;
    --gray-4: #F5F5F5;
    --gray-5: #EDEDED;
    --gray-6: #E5E5E5;
    --gray-7: #CDCDCD;
    --gray-8: #A8A8A8;
    --gray-9: #747474;
    --gray-10: #393939;
    --gray-11: #000000;
    --red-1: #FFF7F6;
    --red-2: #FFEDEB;
    --red-3: #FFE0DB;
    --red-4: #FFD3C9;
    --red-5: #FFB7A4;
    --red-6: #FF9574;
    --red-7: #FF6E3C;
    --red-8: #FF4500;
    --red-9: #AA2E00;
    --red-10: #541600;
    --green-1: #F4FFF4;
    --green-2: #E9FFE8;
    --green-3: #D9FFD8;
    --green-4: #C9FFC7;
    --green-5: #A6FFA3;
    --green-6: #7CF178;
    --green-7: #51DA4C;
    --green-8: #3FA93B;
    --green-9: #2D712A;
    --green-10: #193718;
    --blue-1: #F4FBFF;
    --blue-2: #E5F1FF;
    --blue-3: #CBDCFF;
    --blue-4: #AFC1FF;
    --blue-5: #7989FF;
    --blue-6: #3C46FF;
    --blue-7: #0000FF;
    --blue-8: #0404AC;
    --blue-9: #020267;
    --blue-10: #00002E;
    --cyan-1: #F0FFFF;
    --cyan-2: #E0FFFF;
    --cyan-3: #CAFFFF;
    --cyan-4: #B3FFFF;
    --cyan-5: #82FFFF;
    --cyan-6: #42FFFF;
    --cyan-7: #00FFFF;
    --cyan-8: #00E7E7;
    --cyan-9: #00B3B3;
    --cyan-10: #005454;
    --yellow-1: #FFFFDB;
    --yellow-2: #FFFFB6;
    --yellow-3: #FFFF8F;
    --yellow-4: #FFFF66;
    --yellow-5: #FFF639;
    --yellow-6: #F5E60D;
    --yellow-7: #CFC52C;
    --yellow-8: #A19A3A;
    --yellow-9: #6C6837;
    --yellow-10: #343322;
    --magenta-1: #FFF9FF;
    --magenta-2: #FFF2FF;
    --magenta-3: #FFD7FF;
    --magenta-4: #FFC1FF;
    --magenta-5: #FF8BFF;
    --magenta-6: #FF45FF;
    --magenta-7: #FF00FF;
    --magenta-8: #C500C5;
    --magenta-9: #830083;
    --magenta-10: #400040;
    --orange-1: #FFFCF5;
    --orange-2: #FFF9EA;
    --orange-3: #FFF1D6;
    --orange-4: #FFE8C1;
    --orange-5: #FFC98A;
    --orange-6: #FFA045;
    --orange-7: #FE7600;
    --orange-8: #C45600;
    --orange-9: #833600;
    --orange-10: #401900;
    --violet-1: #FFF9FF;
    --violet-2: #FFF2FF;
    --violet-3: #FEE6FF;
    --violet-4: #FCDAFF;
    --violet-5: #EBBBFF;
    --violet-6: #D292FF;
    --violet-7: #B161FD;
    --violet-8: #8A2BE2;
    --violet-9: #571397;
    --violet-10: #28044A;
    --brown-1: #F7ECE6;
    --brown-2: #F0DACF;
    --brown-3: #E8C7B6;
    --brown-4: #E1B59F;
    --brown-5: #CB9379;
    --brown-6: #B67252;
    --brown-7: #A0522D;
    --brown-8: #793A1C;
    --brown-9: #51230D;
    --brown-10: #2A1003;
    --gray-900: #000000;
    
    --text-primary: var(--gray-900);
    --text-primary-rgb: 0,0,0;
    --text-inverse: var(--background-primary);
    --text-secondary: var(--gray-700);
    --text-interactive-primary: var(--gray-900);
    --border-primary: var(--gray-900);
    --border-secondary: rgba(0,0,0,.2);
    --border-inverse: var(--background-primary);
    --background-primary: var(--gray-000);
    --background-inverse: var(--text-primary);
    --background-success: var(--green-200);
    --background-interactive-primary-hover: var(--gray-400);
    --transparent: transparent;
    --gray-000: #FFFFFF;
    --gray-050: #F2F2F2;
    --gray-100: #FAFAFA;
    --gray-200: #F5F5F5;
    --gray-300: #EDEDED;
    --gray-400: #E5E5E5;
    --gray-500: #CDCDCD;
    --gray-600: #A8A8A8;
    --gray-700: #747474;
    --gray-800: #393939;
    --gray-900: #000000;
    --red-050: #FFF7F6;
    --red-100: #FFEDEB;
    --red-200: #FFE0DB;
    --red-300: #FFD3C9;
    --red-400: #FFB7A4;
    --red-500: #FF9574;
    --red-600: #FF6E3C;
    --red-700: #FF4500;
    --red-800: #AA2E00;
    --red-900: #541600;
    --green-050: #F4FFF4;
    --green-100: #E9FFE8;
    --green-200: #D9FFD8;
    --green-300: #C9FFC7;
    --green-400: #A6FFA3;
    --green-500: #7CF178;
    --green-600: #51DA4C;
    --green-700: #3FA93B;
    --green-800: #2D712A;
    --green-900: #193718;
    --blue-050: #F4FBFF;
    --blue-100: #E5F1FF;
    --blue-200: #CBDCFF;
    --blue-300: #AFC1FF;
    --blue-400: #7989FF;
    --blue-500: #3C46FF;
    --blue-600: #0000FF;
    --blue-700: #0404AC;
    --blue-800: #020267;
    --blue-900: #00002E;
    --cyan-050: #F0FFFF;
    --cyan-100: #E0FFFF;
    --cyan-200: #CAFFFF;
    --cyan-300: #B3FFFF;
    --cyan-400: #82FFFF;
    --cyan-500: #42FFFF;
    --cyan-600: #00FFFF;
    --cyan-700: #00E7E7;
    --cyan-800: #00B3B3;
    --cyan-900: #005454;
    --yellow-050: #FFFFDB;
    --yellow-100: #FFFFB6;
    --yellow-200: #FFFF8F;
    --yellow-300: #FFFF66;
    --yellow-400: #FFF639;
    --yellow-500: #F5E60D;
    --yellow-600: #CFC52C;
    --yellow-700: #A19A3A;
    --yellow-800: #6C6837;
    --yellow-900: #343322;
    --magenta-050: #FFF9FF;
    --magenta-100: #FFF2FF;
    --magenta-200: #FFD7FF;
    --magenta-300: #FFC1FF;
    --magenta-400: #FF8BFF;
    --magenta-500: #FF45FF;
    --magenta-600: #FF00FF;
    --magenta-700: #C500C5;
    --magenta-800: #830083;
    --magenta-900: #400040;
    --orange-050: #FFFCF5;
    --orange-100: #FFF9EA;
    --orange-200: #FFF1D6;
    --orange-300: #FFE8C1;
    --orange-400: #FFC98A;
    --orange-500: #FFA045;
    --orange-600: #FE7600;
    --orange-700: #C45600;
    --orange-800: #833600;
    --orange-900: #401900;
    --violet-050: #FFF9FF;
    --violet-100: #FFF2FF;
    --violet-200: #FEE6FF;
    --violet-300: #FCDAFF;
    --violet-400: #EBBBFF;
    --violet-500: #D292FF;
    --violet-600: #B161FD;
    --violet-700: #8A2BE2;
    --violet-800: #571397;
    --violet-900: #28044A;
    --brown-050: #F7ECE6;
    --brown-100: #F0DACF;
    --brown-200: #E8C7B6;
    --brown-300: #E1B59F;
    --brown-400: #CB9379;
    --brown-500: #B67252;
    --brown-600: #A0522D;
    --brown-700: #793A1C;
    --brown-800: #51230D;
    --brown-900: #2A1003;

}

.flex{
    display: flex;
}
.flex-align-center{
    align-items: center;
}
.flex-direction-row{
    flex-direction: row;
}
.flex-direction-column{
    flex-direction: column;
}

.transform_rotate_180{
    transform: rotate(180deg);
}
.transition_1{
    transition: all 1s;
}  
.transition_05{
    transition: all 0.5s;
}  
.mr-1{
    margin-right:1px;
}
.mr-2{
    margin-right:2px;
}
.mr-3{
    margin-right:2px;
}
.mr-4{
    margin-right:3px;
}
.mr-5{
    margin-right:5px;
}
.mr-6{
    margin-right:6px;
}
.mr-7{
    margin-right:7px;
}
.mr-8{
    margin-right:8px;
}
.mr-9{
    margin-right:9px;
}
.mr-10{
    margin-right:10px;
}
.mr-11{
    margin-right:11px;
}
.mr-12{
    margin-right:12px;
}
.mr-13{
    margin-right:13px;
}
.mr-14{
    margin-right:14px;
}
.mr-15{
    margin-right:15px;
}
.mr-16{
    margin-right:16px;
}
.mr-17{
    margin-right:17px;
}

.ml-1{
    margin-left:1px;
}
.ml-2{
    margin-left:2px;
}
.ml-3{
    margin-left:3px;
}
.ml-4{
    margin-left:4px;
}
.ml-5{
    margin-left:5px;
}
.ml-6{
    margin-left:6px;
}
.ml-7{
    margin-left:7px;
}
.ml-8{
    margin-left:8px;
}
.ml-9{
    margin-left:9px;
}
.ml-10{
    margin-left:10px;
}
.ml-11{
    margin-left:11px;
}
.ml-12{
    margin-left:12px;
}
.ml-13{
    margin-left:13px;
}
.ml-14{
    margin-left:14px;
}
.ml-15{
    margin-left:15px;
}
.ml-16{
    margin-left:16px;
}
.ml-17{
    margin-left:17px;
}
.ml-18{
    margin-left:18px;
}
.ml-19{
    margin-left:19px;
}
.ml-20{
    margin-left:20px;
}

.mb-1{
    margin-bottom:1px;
}
.mb-2{
    margin-bottom:2px;
}
.mb-3{
    margin-bottom:3px;
}
.mb-4{
    margin-bottom:4px;
}
.mb-5{
    margin-bottom:5px;
}
.mb-6{
    margin-bottom:6px;
}
.mb-7{
    margin-bottom:7px;
}
.mb-8{
    margin-bottom:8px;
}
.mb-9{
    margin-bottom:9px;
}
.mb-10{
    margin-bottom:10px;
}
.mb-11{
    margin-bottom:11px;
}
.mb-12{
    margin-bottom:12px;
}
.mb-13{
    margin-bottom:13px;
}
.mb-14{
    margin-bottom:14px;
}
.mb-15{
    margin-bottom:15px;
}
.mb-16{
    margin-bottom:16px;
}
.mb-17{
    margin-bottom:17px;
}
.mb-18{
    margin-bottom:18px;
}
.mb-19{
    margin-bottom:19px;
}
.mb-20{
    margin-bottom:20px;
}
.position-ab{
    position: absolute;
}
.position-re{
    position: relative;
}

.cursor-pointer {
    cursor:pointer;
}